<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: black;
        }

        .div1 {
            width: 100%;
            height: 480px;
            background-color: blue;
        }

        .div2 {
            width: 100%;
            height: 480px;
            background-color: brown;
            padding-top: 100px;
            padding-left: 300px;
        }

        .text {
            width: 50px;
            border: 1px solid #c2c2c2;
            height: 50px;
            border-radius: 5px;
            margin: 10px;
            font-size: 24px;
            text-align: right;
            background: #ffffff;

        }

        .img1 {
            /* display: block;
                border:solid 10px rebeccapurple; */
        }
        #computer{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            margin-top: 10vh;
        }
        .out-div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            margin-top: 10vh;
        }
    </style>


</head>

<body>
    <div>
        <div class="div1">
            <input type="button" value="初级" class="text">
            <input type="button" value="中级" class="text">
            <input type="button" value="高级" class="text">
            <div class="out-div">
                <img src="" id="computer" alt="">
                <p style="font-size: 30px;text-align: center;color: #fff;" id="result"></p>
            </div>
        </div>
        <div class="div2">
            <div style="width: 30%; float: left;"><img src="./images/剪刀.jpg" alt="剪刀" class="img1"></div>
            <div style="width: 30%; float: left;"><img src="./images/布.jpg" alt="石头" class="img1"></div>
            <div><img src="./images/石头.jpg" alt="布" class="img1"></div>
        </div>
    </div>
    <script src="./js/jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            var computerImg = [{value:0,url:"./images/剪刀.jpg"},{value:1,url:"./images/布.jpg"},{value:2,url:"./images/石头.jpg"}]
            var rank = 0


            $(".text").click(function(){
                rank = $(".text").index($(this))
            })
            $(".img1").each(function () {

                $(this).click(function () {
                    $("#result").text( "")
                    $(".img1").each(function () {
                        $(this).css({ border: "none" })
                    })
                    $(this).css({ border: "3px solid yellow" })
                    var timesIndex = 0
                   var times = setInterval(()=>{

                        $("#computer").attr("src",computerImg[timesIndex].url);
                        timesIndex++
                        if(timesIndex==3){
                            timesIndex=0
                        }
                    },500)
                    setTimeout(()=>{
                        clearInterval(times)
                        let index =  $(".img1").index($(this))
                        $("#computer").attr("src",giveOneImg(index).url);
                        if(rank==0){
                          return  $("#result").text( "你赢了！") 
                        }
                        if(rank==1){
                            if(index==giveOneImg(index).value){
                                return $("#result").text( "打成平手！") 
                            }
                            if(index==0){
                                if(giveOneImg(index).value==1){
                                    return  $("#result").text( "你赢了！") 
                                }
                                if(giveOneImg(index).value==2){
                                    return  $("#result").text( "你输了！") 
                                }
                            }
                            if(index==1){
                                if(giveOneImg(index).value==1){
                                    return  $("#result").text( "你赢了！") 
                                }
                                if(giveOneImg(index).value==0){
                                    return  $("#result").text( "你输了！") 
                                }
                            }
                            if(index==2){
                                if(giveOneImg(index).value==0){
                                    return  $("#result").text( "你赢了！") 
                                }
                                if(giveOneImg(index).value==1){
                                    return   $("#result").text( "你输了！") 
                                }
                            }
                        }
                        if(rank==2){
                            return $("#result").text( "你输了！") 
                        }
                    },3000)
                   

                })
            })

            // 计算本次应该出什么
            function giveOneImg(index){
                console.log(rank)
                if(rank==0){
                    if(index==0){
                        return computerImg[1]
                    }
                    if(index==1){
                        return computerImg[2]
                    }
                    if(index==2){
                        return computerImg[0]
                    }
                }
                if(rank==1){
                    let random = Math.floor(Math.random() * 3)
                    return computerImg[random]
                }
                if(rank==2){
                    if(index==0){
                        return computerImg[2]
                    }
                    if(index==1){
                        return computerImg[0]
                    }
                    if(index==2){
                        return computerImg[1]
                    }
                }
            }


        });
    </script>
</body>

</html>